<template>
	<view>
		<tui-drawer mode="bottom" :visible="visible" @close="closeDrawer">
			<view class="renew-container">
				<view class="title">
					<text class="titleTxt">一键续费</text>
					<view class="close" @tap="closeDrawer">
						<image class="closeImg" src="/static/user/my/icon_add3@2x.png"></image>
					</view>
				</view>
				<view class="renew-rule">
					<view class="rule">
						<text>续费规则</text>
						<image class="ruleImg" src="/static/user/my/icon_guize@2x.png"></image>
					</view>
					<view class="time_items">
						<view class="time_item" @tap="renewIndex=1" :style="renewIndex === 1 ? 'background:#2FD7D3':''">
							<text>1小时</text>
						</view>
						<view class="time_item" @tap="renewIndex=2" :style="renewIndex === 2 ? 'background:#2FD7D3':''">
							<text>2小时</text>
						</view>
						<view class="time_item" @tap="renewIndex=3" :style="renewIndex === 3 ? 'background:#2FD7D3':''">
							<text>3小时</text>
						</view>
						<view class="time_item" @tap="renewIndex=4" :style="renewIndex === 4 ? 'background:#2FD7D3':''">
							<text>4小时</text>
						</view>
					</view>
				</view>
				<tui-form-button @click="clickRenew" margin="0 0 30rpx 0" radius="70rpx" size="32" color="#fff"
					width="690rpx" height="84rpx" background="#2FD7D3">
					<tui-icon name="alarm" color="#fff" :size="'42rpx'" margin="0 8rpx 0 0"></tui-icon>
					谢谢大家的支持（￥98）
				</tui-form-button>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	export default {
		emits: ['alterVisible', 'clickRenew'],
		props: {
			//一键续约弹窗
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				renewIndex: 1
			}
		},
		methods: {
			clickRenew() {
				this.$emit("clickRenew", this.renewIndex)
			},
			closeDrawer() {
				this.$emit("alterVisible", false)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.renew-container {
		padding: 0 30rpx 8rpx 30rpx;

		.renew-rule {
			padding: 40rpx 0;
			font-weight: 500;

			.rule {
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
			}

			.ruleImg {
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}

			.time_items {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc(100w - 60rpx);

				.time_item {
					padding: 22rpx 38rpx;
					margin-right: 28rpx;
					background: #CCCCCC;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: center;
				}

				.time_item:last-child {
					margin-right: 0
				}
			}
		}

		.title {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 使所有内容居中 */
			position: relative;

			/* 相对定位父容器，方便定位图标 */
			.titleTxt {
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				flex: 1;
				/* 标题占据剩余空间 */
				text-align: center;
				/* 标题居中 */
			}

			.close {
				position: absolute;
				/* 绝对定位图标 */
				right: 0;
				/* 图标右对齐 */
				width: 48rpx;
				height: 48rpx;

				.closeImg {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>